<template>
	<view>
		<view>
			<view class="btn1" @click="goRecent">我的足迹</view>
		</view>
		<view class="top">
			<ul>
				<li class="li1">他们是你主页的常客</li>
				<li class="li2">有<text class="num">{{randomSize}}</text>个人反复看过你，快去打个招呼吧！</li>
			</ul>
			<view class="btn" @click="sayHello('',2)">一键招呼</view>
		</view>
		<view v-for="(item,index) in list" :key="index" class="viewItem">
			<image :src="$global.getImageUrl(item.headImg, 'http://ourydcimage.shenghua6.cn')" mode="" class="headImg">
			</image>
			<div class="left">
				<p class="name">{{item.nickName}}</p>
				<p class="sex"
					:style="item.sex==1?'background: url('+man+') no-repeat;background-size: contain;':item.sex==2?'background: url('+woman+') no-repeat;background-size: contain;':'background: url('+no+') no-repeat;background-size: contain;'">
					{{item.age}}
				</p>
				<ul>
					<li class="li1">访客来源:{{item.sourceName}}<text class="line">|</text></li>
					<li class="li2">{{item.lastTime}}</li>
					<li class="li3"><text class="line">|</text>看过我:<text class="txt">{{item.footprintCount}}次</text>
					</li>
				</ul>
			</div>
			<image :src="$BASE_URL+'/st/mini/static/img/seenMe/dazhaohu.png'" mode="" class="btn"
				v-if="item.blackState!=1" @click="sayHello(item.userId,1)"></image>
		</view>
		
		<uni-popup ref="popup" type="bottom">
			<view class="pop">
				<image :src="$BASE_URL+'/st/mini/static/img/seenMe/bgchongzhi.png'" mode="" class="topimg"></image>
				<view style="display: flex;margin: 0 30upx;">
					<view style="flex: 1;display: flex;">
						<view v-for="(price,index) in priceData" :key="index" class="listAll"
							:class="{ active: isIndex==index }" @click="changeTab(index)">
							<view class="txt" :style="price.disCount!=''?'background: #FF4158;':''">{{price.disCount}}
							</view>
							<ul>
								<li class="li2">{{price.num}}个月</li>
								<li class="li3">￥{{price.totalPrice}}</li>
							</ul>
						</view>
					</view>
				</view>
				<view class="openBtn">成为哩咔会员 立即解锁</view>
				<view class="tip">成为会员即表示同意<text style="color: #FF4158;" @click="goPath">《哩咔会员协议》</text></view>
			</view>
		</uni-popup>
		<uni-load-more :status="status" :content-text="contentText" />
	</view>
</template>

<script>
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
	import uniPopup from '../../components/uni-popup/uni-popup.vue';
	export default {
		components: {
			uniLoadMore,
			uniPopup
		},
		data() {
			return {
				$BASE_URL: this.$BASE_URL,
				isIndex: 0,
				url: '',
				isMember: 0,
				randomSize: 0,
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				page: 1,
				isLoadMore: false, //是否加载中
				list: [],
				userData: [],
				priceData: [],
				man: '',
				woman: '',
				no: ''
			}
		},
		mounted() {
			this.man = this.$BASE_URL + '/st/mini/static/img/sex/man.png'
			this.woman = this.$BASE_URL + '/st/mini/static/img/sex/woman.png'
			this.no = this.$BASE_URL + '/st/mini/static/img/sex/no.png'
		},
		onShow() {
			this.loadMoreFunc();
			this.openMemberInfo()
		},
		// 上拉加载更多,onReachBottom上拉触底函数
		onReachBottom: function() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.page++
				this.loadMoreFunc();
			}

		},
		methods: {
			changeTab(index) {
				this.isIndex = index
			},
			loadMoreFunc() {
				this.status = 'loading';
				var data = {
					url: '/web/v2/api/newApi/user/footprint',
					methods: 'post',
					data: {
						page: this.page
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.randomSize = res.data.data.randomSize
						this.isMember = res.data.data.isMember
						if (res.data.data.list) {
							this.list = this.list.concat(res.data.data.list)
							if (res.data.data.list.length == 0) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.status = 'nomore'
							} else {
								this.status = 'nomore'
								this.isLoadMore = false
							}
							this.list.map((item, key) => {
								if (item.blackState != 1) {
									this.userData.push(item.userId)
								}
								// this.status = 'nomore'
							})
						} else {
							this.isLoadMore = true
							this.status = 'nomore'
						}
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
					}
				})
			},
			sayHello(userId, num) {
				if (this.isMember != 1) {
					this.$refs.popup.open('bottom1')
					return
				}
				if (num == 1) {
					var data = {
						url: '/web/v2/api/newApi/firstPage/sayHello',
						methods: 'post',
						data: {
							toUserId: userId
						}
					}
				} else {
					var data = {
						url: '/web/v2/api/newApi/firstPage/sayHello',
						methods: 'post',
						data: {
							toUserId: this.userData.join(',')
						}
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						uni.showToast({
							title: '打招呼成功~',
							icon: 'none'
						})
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			openMemberInfo() {
				var data = {
					url: '/web/v2/api/newApi/user/openMemberInfo',
					methods: 'post',
					data: {

					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						this.priceData = res.data.data.list
						this.url = res.data.data.vipAgreementUrl
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},
			goRecent() {
				uni.navigateTo({
					url: '../recent/recent'
				})
			},
			goPath(url) {
				uni.navigateTo({
					url: '../path/path?url=' + this.url
				})
			}
		},
		filters: {
			typeFilter: function(val) {
				var status = '';
				switch (val) {
					case "12":
						status = '钻石礼物';
						break;
					case "14":
						status = '开启动态';
						break;
					case "15":
						status = '视频打赏';
						break;
					case "16":
						status = '活动';
						break;
					case "17":
						status = '家族收入';
						break;
					case "18":
						status = '订单收入';
						break;
					case "19":
						status = '订单退款';
						break;
					case "21":
						status = '守护收入';
						break;
					case "22":
						status = '聊天室贵宾席';
						break;
					case "30":
						status = '现金收入转入';
						break;
					default:
						status = '其他收入';
						break;
				}
				return status;
			},
			timeFilter: function(value) {
				var date
				if (value) {
					if (value.length !== 10) {
						date = new Date(parseInt(value))
					} else {
						date = new Date(parseInt(value * 1000))
					}
					var Y = date.getFullYear() + '-'
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
					var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
					var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
					return Y + M + D + h + m + s
				} else {
					return '——'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 630upx;
		height: 126upx;
		padding: 0 28upx;
		background: #FFFFFF;
		box-shadow: 0 4upx 9upx 2upx rgba(0, 0, 0, 0.08);
		border-radius: 32upx;
		margin: 10upx auto;
		margin-bottom: 35upx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.li1 {
			font-size: 32upx;
			color: #333333;
		}

		.li2 {
			font-size: 24upx;
			color: #333333;

			.num {
				color: #FF4058;
			}
		}

		.btn {
			width: 146upx;
			height: 72upx;
			line-height: 72upx;
			text-align: center;
			background: #FF4058;
			border-radius: 36upx;
			font-size: 26upx;
			color: #FFFFFF;
		}
	}

	.btn1 {
		width: 146upx;
		height: 72upx;
		line-height: 72upx;
		text-align: center;
		// background: #FF4058;
		border-radius: 36upx;
		font-size: 26upx;
		color: #333;
		float: right;
		margin-right: 40upx;
	}

	.viewItem {
		display: flex;
		align-items: center;
		margin-bottom: 36upx;

		.headImg {
			width: 100upx;
			height: 100upx;
			border-radius: 50%;
			margin-left: 21upx;
		}

		.name {
			font-size: 28upx;
			color: #333333;
		}

		.left {
			margin-left: 19upx;
			margin-right: 2.2upx;
		}

		.sex {
			width: 66upx;
			height: 28upx;
			line-height: 28upx;
			color: #FFFFFF;
			font-size: 18upx;
			text-align: center;
		}

		ul {
			display: flex;
			font-size: 22upx;
			color: #ABABAB;
		}

		.line {
			padding: 0 14.5upx;
		}

		.li3 {
			.txt {
				color: #FF4058;
			}
		}

		.btn {
			width: 144upx;
			height: 46upx;
			margin-left: auto;
			margin-right: 20upx;
		}
	}

	.pop {
		background: #fff;
		border-radius: 30upx 30upx 0 0;
		text-align: center;

		.topimg {
			width: 100%;
			height: 172upx;
		}

		.listAll {
			position: relative;
			background: #FAFAFA;
			border: 3upx solid #FAFAFA;
			border-radius: 11upx;
			width: 206upx;
			height: 190upx;
			margin: 0 auto;
			margin-top: 42upx;
		}

		.active {
			border: 3upx solid #FF4158;
		}

		.txt {
			width: 110upx;
			height: 40upx;
			line-height: 40upx;
			border-radius: 11upx 11upx 11upx 0;
			font-size: 24upx;
			color: #FFFFFF;
			position: absolute;
			top: -20upx;
			left: -3upx;
		}

		.li2 {
			font-size: 28upx;
			color: #FF4158;
			margin-top: 35upx;
		}

		.li3 {
			font-size: 50upx;
			color: #FF4158;
			margin-top: 13upx;
		}

		.openBtn {
			width: 664upx;
			height: 100upx;
			line-height: 100upx;
			text-align: center;
			background-image: linear-gradient(90deg, #FF4058 0%, #FF885C 100%);
			border-radius: 50upx;
			font-size: 32upx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 38upx;
		}

		.tip {
			text-align: center;
			font-size: 24upx;
			color: #999999;
			padding-top: 26upx;
			padding-bottom: 23upx;
		}
	}
</style>
